<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览博客</title>
    <script src="../static/js/axios.js"></script>
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/ViewBlog.css">
    <link rel="shortcut icon" href="../static/imgs/cms.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../editormd/css/editormd.min.css">
    <script src="../static/js/jQuery.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script src="../editormd/editormd.min.js"></script>
</head>
<body>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #373636;color: white;font-weight: bold">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">提示！！!</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--导航栏--->
<nav class="navbar navbar-default nav_bottom" style="position: fixed">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" style="font-weight: 900;font-size: 40px"><span style="color: #fc5531;">c</span>sdn</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav nav-title">
                <li><a href="#" style="font-weight: bold;color: #999999;font-size: 25px">浏览博客</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="user-head-icon">
                    <img src="" class="user-head" alt="">
                    <div class="drop-box" style="display: none;">
                        <div class="drop-nickname-box">
                            <div class="drop-nickname">
                            </div>
                            <div style="width: 100%;height: 2px">
                                <hr style="width: 100%;">
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--文章主界面-->
<div class="article-big-box">
    <div class="article-box">
     <!--文章左侧边栏-->
    <div  class="article_side_left_box">
         <!--作者模块-->
        <div class="article-author-box">
             <!--标题-->
             <div class="author-title-box">
                 <div class="author-title">
                     博客作者
                 </div>
                 <div class="hr-line">
                 </div>
             </div>
             <!--作者头像-->
             <div class="author-avatar-box">
               <img src="" alt="" class="author-avatar">
             </div>
             <!--作者昵称-->
             <div class="author-name-box">
                 作者昵称
            </div>
             <!--关系按钮-->
             <div class="author-btn-box">
               <button id="author-btn" class="" >
                   关注
               </button>
             </div>
             <!--作者成就-->
             <div class="author-success">
                 <div class="success-item-box">
                     <div class="blog_self_count">0</div>
                     <div class="success-item-info">原创</div>
                 </div>
                 <div class="success-item-box">
                     <div class="fans_count">0</div>
                     <div class="success-item-info">粉丝</div>
                 </div>
                 <div class="success-item-box">
                     <div class="support-count">0</div>
                     <div class="success-item-info">获赞</div>
                 </div>
                 <div class="success-item-box">
                     <div class="comment-count">0</div>
                     <div class="success-item-info">评论</div>
                 </div>
                 <div class="success-item-box">
                     <div class="collection-count">0</div>
                     <div class="success-item-info">收藏</div>
                 </div>
             </div>
        </div>

    </div>

    <!--正文部分-->
    <div class="article-content-box">
         <!--文章基本信息-->
          <div class="article-base-info-box">
              <!--标题信息-->
             <div class="article-title-box">
                 <div class="is-original-box">
                     原创
                 </div>
                <div class="article-title">
                     文章标题
                </div>
             </div>
              <!--标签、分栏等信息-->
              <div class="article-info-big-box">
                  <div class="article-info-box">
                      <div class="article-time">
                          <span class="glyphicon glyphicon-time" aria-hidden="true"></span>于
                          <span class="article-create-time">2022-08-01 :07:59:26</span>
                          发布
                      </div>
                      <div class="article-info">
                          <div class="column-title">分类专栏:</div>
                          <div class="column-list">
                          </div>
                          <div class="column-title">文章标签：</div>
                          <div class="label-list">
                          </div>
                      </div>
                  </div>
              </div>
              <!--文章内容-->
              <div class="article-main-content-box">
                  <div class="article-content" id="markdown-body">

                  </div>
              </div>
              <!--文章操作-->
              <div class="article-operation-box">
                     <div class="operation-support">
                         <a href='javascript:void(0)' class="support-icon-box" is_support="0">
                             <img src="../static/imgs/点赞_块.png" alt="" class="support-icon">
                         </a>
                     </div>
                  <div class="support-number operation-info">0</div>
                  <div class="operation-collection">
                      <a href='javascript:void(0)' class="collection-icon-box" is_collection="0">
                          <img src="../static/imgs/收藏.png" alt="" class="collection-icon-box-icon">
                      </a>
                  </div>
                  <div class="collection-number operation-info">0</div>
                  <div class="operation-comment">
                      <a href='javascript:void(0)' class="comment-icon-box" is_collection="0">
                          <img src="../static/imgs/评论.png" alt="" class="comment-icon-box-icon">
                      </a>
                  </div>
                  <div class="comment-number operation-info">0</div>
              </div>
          </div>
        <!--文章评论-->
        <div class="article-comment-box">
             <!--写评论-->
             <div class="write-comment-box">
                <div class="write-comment-avatar-box">
                    <img src="../warehouse/1577715440_TAGw_IMG_1786.JPG" alt="" class="write-comment-avatar-img">
                </div>
                 <div class="write-comment-in-box">
                     <div class="write-comment-input-box">
                         <label>
                             <textarea class="write-comment-input" placeholder="快来发表你的评论吧~"></textarea>
                         </label>
                     </div>
                     <div class="write-comment-btn-box">
                         <div class="write-comment-btn">
                             评论
                         </div>
                     </div>
                 </div>
             </div>
           <!--评论区-->
            <div class="show-comment-box">
                <div class="comment-list">
<!--                     <div class="comment-item" comment_id="11">-->
<!--                          &lt;!&ndash;顶层评论&ndash;&gt;-->
<!--                       <div class="root-comment-container">-->
<!--                           <div class="root-comment-avatar-box">-->
<!--                                <img src="../warehouse/1577715440_TAGw_IMG_2368.JPG" alt="" class="root-comment-avatar">-->
<!--                           </div>-->
<!--                           <div class="root-info-box">-->
<!--                              <div class="root-nickname">用户昵称1</div>-->
<!--                              <div class="root-content">-->
<!--                                 谢谢博主分享，收获很大11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<!--                              </div>-->
<!--                              <div class="root-other-box">-->
<!--                                   <div class="root-time">-->
<!--                                       2022-08-05 :10:29:34-->
<!--                                   </div>-->
<!--                                   <div class="root-reply">-->
<!--                                       回复-->
<!--                                   </div>-->
<!--                               </div>-->
<!--                               &lt;!&ndash;回复输入框&ndash;&gt;-->
<!--                               <div class="root-comment-reply-input-box">-->
<!--                                   <label>-->
<!--                                       <textarea class="root-comment-input" placeholder="发表评论"></textarea>-->
<!--                                  </label>-->
<!--                                      <button class="root-comment-box" top_id="11" parent_id="用户昵称1">评论</button>-->
<!--                               </div>-->
<!--                           </div>-->
<!--                       </div>-->
<!--                          &lt;!&ndash;二级评论&ndash;&gt;-->
<!--                        <div class="sub-reply-container">-->
<!--                            <div class="sub-reply-list" title="1">-->
<!--                                <div class="sub-reply-item">-->
<!--                                   <div class="sub-reply-avatar-box">-->
<!--                                      <img src="../warehouse/1577715440_TAGw_IMG_1786.JPG" alt="" class="sub-reply-avatar">-->
<!--                                   </div>-->
<!--                                    <div class="sub-reply-info-box">-->
<!--                                         <div class="sub-reply-title">-->
<!--                                             <div class="sub-reply-from-user">用户昵称1</div>-->
<!--                                             <div class="sub-reply-in-title">回复</div>-->
<!--                                             <div class="sub-reply-to-user">用户昵称2</div>-->
<!--                                         </div>-->
<!--                                        <div class="sub-reply-content">-->
<!--                                             说的太好了，确实收获很大111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<!--                                        </div>-->
<!--                                        <div class="sub-reply-other-box">-->
<!--                                            <div class="sub-reply-time">-->
<!--                                                2022-07-05 :02:07:59-->
<!--                                            </div>-->
<!--                                            <div class="sub-reply">-->
<!--                                                回复-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                        <div class="sub-reply-out-box">-->
<!--                                            <label>-->
<!--                                                <textarea class="sub-reply-input" top_id="" parent_id="" placeholder="发表评论"></textarea>-->
<!--                                            </label>-->
<!--                                            <button class="sub-reply-btn">评论</button>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                     </div>-->
                </div>
            </div>
        </div>

    </div>

    <!--文章右侧边栏-->
    <div class="article-side-right-box">
        <div class="author-column-box">
            <!--标题-->
            <div class="author-title-box">
                <div class="author-title">
                    TA的分类专栏
                </div>
                <div class="hr-line">
                </div>
                <div class="column_list">
                     <div class="side_column_item">
                         <div class="side_column_name">
                             <a href="#">专栏名</a>
                         </div>
                         <div class="side_column_blog_count">
                             13
                         </div>
                         <div class="side_column_title">
                             篇
                         </div>
                     </div>


                </div>
            </div>
        </div>
    </div>
    </div>
</div>
<script src="../editormd/lib/marked.min.js"></script>
<script>
    let contentEditor;
    let md_code;
    let blog_id;
    let author_id;
    let is_delete;
    $(function () {
        /*获取头像*/
        $(".user-head").attr("src",window.localStorage.getItem("avatar"));
        $(".write-comment-avatar-img").attr("src",window.localStorage.getItem("avatar"));
        /*获取博客id*/
        const href=decodeURI(window.location.href);//译码
        let hrefIndex=href.split('?blog_id=');
        blog_id=hrefIndex[1];
        get_article_content();
    })


    /*展示顶层评论*/
    function push_comment_list(data) {
          $(".comment-list").prepend(`<div class="comment-item" comment_id=${data['id']}>
                          <!--顶层评论-->
                       <div class="root-comment-container">
                           <div class="root-comment-avatar-box">
                                <img src=${data['avatar']} alt="" class="root-comment-avatar">
                           </div>
                           <div class="root-info-box">
                              <div class="root-nickname">${data['user_id']}</div>
                              <div class="root-content">
                                 ${data['comment_content']}
                              </div>
                              <div class="root-other-box">
                                   <div class="root-time">
                                      ${data['create_time']}
                                   </div>
                                   <div class="root-reply">
                                       回复
                                   </div>
                               </div>
                               <!--回复输入框-->
                               <div class="root-comment-reply-input-box">
                                   <label>
                                       <textarea class="root-comment-input" placeholder="发表评论"></textarea>
                                  </label>
                                      <button class="root-comment-box" top_id=${data['id']} parent_id=${data['user_id']}>评论</button>
                               </div>
                           </div>
                       </div>
                          <!--二级评论-->
                        <div class="sub-reply-container">
                            <div class="sub-reply-list" title=${data['id']}>
                            </div>
                        </div>
                     </div>`);
    }

    /*展示二级评论*/
    function push_reply_list(data) {
          $(`div[title=${data['top_id']}]`).prepend(`<div class="sub-reply-item">
                                   <div class="sub-reply-avatar-box">
                                      <img src=${data['avatar']} alt="" class="sub-reply-avatar">
                                   </div>
                                    <div class="sub-reply-info-box">
                                         <div class="sub-reply-title">
                                             <div class="sub-reply-from-user">${data['user_id']}</div>
                                             <div class="sub-reply-in-title">回复</div>
                                             <div class="sub-reply-to-user">${data['parent_id']}</div>
                                         </div>
                                        <div class="sub-reply-content">
                                            ${data['comment_content']}
                                        </div>
                                        <div class="sub-reply-other-box">
                                            <div class="sub-reply-time">
                                               ${data['create_time']}
                                            </div>
                                            <div class="sub-reply">
                                                回复
                                            </div>
                                        </div>
                                        <div class="sub-reply-out-box">
                                            <label>
                                                <textarea class="sub-reply-input"  placeholder="发表评论"></textarea>
                                            </label>
                                            <button top_id=${data['top_id']} parent_id=${data['user_id']} class="sub-reply-btn">评论</button>
                                        </div>
                                    </div>
                                </div>`);
    }


    /*发表顶级评论*/
    $(".write-comment-btn").click(function () {
        if($(".write-comment-input").val().length===0){
            modal("评论内容不能为空！");
        }else{
            add_comment_number();
            let url='http://localhost:8080/articleServlet?action=write_comment'
            axios({
                method: "GET",
                url:url,
                params:{
                    blog_id:blog_id,
                    user_id:window.localStorage.getItem("nickname"),
                    comment_content:$(".write-comment-input").val(),
                    top_id:"-1",
                    parent_id:"-1",
                    avatar:window.localStorage.getItem("avatar")
                }
            }).then(function (res) {
                  $(".write-comment-input").val("");
                   console.log(res);
                   let data=res.data.data;
                   push_comment_list(data);
                   $(".root-reply").off("click");
                  /*顶层评论的回复按钮*/
                  $(".root-reply").click(function () {
                    if($(this).parent().next().css("display")==="none") {
                        $(this).text("收起");
                        $(this).parent().next().show();
                        $(this).parent().next().children().children().attr("placeholder", "回复：" + $(this).parent().prev().prev().text());
                    }else{
                        $(this).text("回复");
                        $(this).parent().next().css("display","none");
                    }
                })
                $(".root-comment-box").off("click");
                /*回复顶层的二级评论*/
                $(".root-comment-box").click(function () {
                    if($(this).prev().children().val()===""){
                        modal("回复内容不能为空！");
                    }else{
                        $(this).parent().css("display","none");
                        write_reply($(this).attr("top_id"),$(this).attr("parent_id"),$(this).prev().children().val());
                        $(this).prev().children().val("");
                        $(this).parent().prev().children().last().text("回复");
                    }
                })
            })
        }
    })


    /*发布二级评论*/
    function write_reply(top_id,parent_id,comment_content) {
        add_comment_number();
        let url='http://localhost:8080/articleServlet?action=write_comment'
        axios({
            method: "GET",
            url:url,
            params:{
                blog_id:blog_id,
                user_id:window.localStorage.getItem("nickname"),
                comment_content:comment_content,
                top_id:top_id,
                parent_id:parent_id,
                avatar:window.localStorage.getItem("avatar")
            }
        }).then(function (res) {
               console.log(res);
               let data=res.data.data;
               push_reply_list(data);
               $(".sub-reply").off("click");
            /*二级评论的回复按钮*/
            $(".sub-reply").click(function () {
                if($(this).parent().next().css("display")==="none"){
                    $(this).text("收起");
                    $(this).parent().next().show();
                    $(this).parent().next().children().children().attr("placeholder", "回复：" + $(this).parent().prev().prev().children().first().text());
                }else{
                    $(this).text("回复");
                    $(this).parent().next().css("display","none");
                }
            })
            $(".sub-reply-btn").off("click");
            /*回复二级评论*/
            $(".sub-reply-btn").click(function () {
                    if($(this).prev().children().val().length===0){
                        alert("22");
                        modal("回复不能为空");
                    }else{
                        $(this).parent().prev().children().last().text("回复")
                        $(this).parent().css("display","none");
                        write_next_reply($(this).attr("top_id"),$(this).attr("parent_id"),$(this).prev().children().val());
                        $(this).prev().children().val("");
                    }
            })

        })
    }

    /*发表二级评论的回复*/
    function write_next_reply(top_id,parent_id,comment_content) {
        add_comment_number();
        let url='http://localhost:8080/articleServlet?action=write_comment'
        axios({
            method: "GET",
            url:url,
            params:{
                blog_id:blog_id,
                user_id:window.localStorage.getItem("nickname"),
                comment_content:comment_content,
                top_id:top_id,
                parent_id:parent_id,
                avatar:window.localStorage.getItem("avatar")
            }
        }).then(function (res) {
            console.log(res);
            let data=res.data.data;
            push_reply_list(data);
            $(".sub-reply").off("click");
            /*二级评论的回复按钮*/
            $(".sub-reply").click(function () {
                if($(this).parent().next().css("display")==="none"){
                    $(this).text("收起");
                    $(this).parent().next().show();
                    $(this).parent().next().children().children().attr("placeholder", "回复：" + $(this).parent().prev().prev().children().first().text());
                }else{
                    $(this).text("回复");
                    $(this).parent().next().css("display","none");
                }
            })
            $(".sub-reply-btn").off("click");
            /*回复二级评论*/
            $(".sub-reply-btn").click(function () {
                if($(this).prev().children().val().length===0){
                    modal("回复不能为空");
                }else{
                    $(this).parent().prev().children().last().text("回复")
                    $(this).parent().css("display","none");
                    write_next_reply($(this).attr("top_id"),$(this).attr("parent_id"),$(this).prev().children().val());
                    $(this).prev().children().val("");
                }
            })

        })
    }

    /*增加评论数*/
    function add_comment_number() {
        $(".comment-number").text((Number($(".comment-number").text())+1).toString());
    }


    /*获取用户对文章的操作*/
    function get_author_is_collection() {
        let url='http://localhost:8080/articleServlet?action=get_author_is_collection'
        axios({
            method: "GET",
            url:url,
            params:{
                blog_id:blog_id,
                user_id:window.localStorage.getItem("email")
            }
        }).then(function (res) {
            console.log(res);
            if(res.data.code===200) {
                let data = res['data'];
                let is_collection = data['data']['is_collection'];
                if (is_collection === "1") {
                    $(".collection-icon-box").empty();
                    $(".collection-icon-box").append(`<img src="../static/imgs/收藏 (1).png" alt="" class="support-icon">`);
                    $(".collection-icon-box").attr("is_collection", "1");
                }
            }
                get_author_is_support();
        })
    }

    /*获取用户是否点赞文章*/
    function get_author_is_support() {
        let url='http://localhost:8080/articleServlet?action=get_author_is_support'
        axios({
            method: "GET",
            url:url,
            params:{
                blog_id:blog_id,
                user_id:window.localStorage.getItem("email")
            }
        }).then(function (res) {
              console.log(res);
            let data = res['data'];
            let is_support=data['data']['is_support'];
            if(is_support==="1"){
                $(".support-icon-box").empty();
                $(".support-icon-box").append(`<img src="../static/imgs/点赞_块 (1).png" alt="" class="support-icon">`);
                $(".support-icon-box").attr("is_support","1");
            }
        })
    }

    /*关注按钮*/
    $("#author-btn").click(function () {
          if(is_delete==="1"){
               modal("该用户已注销");
          }
          else if(author_id===window.localStorage.getItem("email"))
          {
              modal("不能关注自己");
          }else{
              if($(this).attr("class")==="author-btn1"){
                    modal("关注成功");
                    $(this).attr("class","author-btn2");
                    $(this).text("已关注");
                  $.post("http://localhost:8080/userServlet?action=concern",{following_id:author_id,email:window.localStorage.getItem("email")});
              }else{
                  modal("取关成功");
                  $(this).attr("class","author-btn1");
                  $(this).text("关注");
                  $.post("http://localhost:8080/userServlet?action=cancel_concern",{following_id:author_id,email:window.localStorage.getItem("email")});
              }
          }
    })

    /*点赞状态切换*/
    $(".support-icon-box").click(function () {
        if($(this).attr("is_support")==="0") {
            $(".support-icon-box").empty();
            $(".support-icon-box").append(`<img src="../static/imgs/点赞_块 (1).png" alt="" class="support-icon">`);
            $(this).attr("is_support","1");
            $(".support-number").text((Number($(".support-number").text())+1).toString());
            support_blog();
        }else{
            $(".support-icon-box").empty();
            $(".support-icon-box").append(`<img src="../static/imgs/点赞_块.png" alt="" class="support-icon">`);
            $(this).attr("is_support","0");
            $(".support-number").text((Number($(".support-number").text())-1).toString());
            cancel_support_blog();
        }
    })

    /*收藏状态切换*/
    $(".collection-icon-box").click(function () {
        if($(this).attr("is_collection")==="0") {
            $(".collection-icon-box").empty();
            $(".collection-icon-box").append(`<img src="../static/imgs/收藏 (1).png" alt="" class="support-icon">`);
            $(this).attr("is_collection","1");
            $(".collection-number").text((Number($(".collection-number").text())+1).toString());
            collection_blog();
        }else{
            $(".collection-icon-box").empty();
            $(".collection-icon-box").append(`<img src="../static/imgs/收藏.png" alt="" class="support-icon">`);
            $(this).attr("is_collection","0");
            $(".collection-number").text((Number($(".collection-number").text())-1).toString());
            cancel_collection_blog();
        }
    })

    /*取消点赞博客*/
    function cancel_support_blog() {
        let url='http://localhost:8080/articleServlet?action=cancel_support_blog'
        axios({
            method: "GET",
            url:url,
            params:{
                blog_id:blog_id,
                user_id:window.localStorage.getItem("email")
            }
        }).then(function (res) {
            console.log(res);
        })
    }

    /*点赞博客*/
    function support_blog() {
        let url='http://localhost:8080/articleServlet?action=support_blog'
        axios({
            method: "GET",
            url:url,
            params:{
                blog_id:blog_id,
                user_id:window.localStorage.getItem("email")
            }
        }).then(function (res) {
              console.log(res);
        })
    }


    /*取消收藏博客*/
    function cancel_collection_blog() {
        let url='http://localhost:8080/articleServlet?action=cancel_collection_blog'
        axios({
            method: "GET",
            url:url,
            params:{
                blog_id:blog_id,
                user_id:window.localStorage.getItem("email")
            }
        }).then(function (res) {
            console.log(res);
        })
    }

    /*收藏博客*/
    function collection_blog() {
        let url='http://localhost:8080/articleServlet?action=collection_blog'
        axios({
            method: "GET",
            url:url,
            params:{
                blog_id:blog_id,
                user_id:window.localStorage.getItem("email")
            }
        }).then(function (res) {
            console.log(res);
        })
    }


    /*展示作者的专栏*/
    function push_author_column(data) {
          $(".column_list").append(`<div class="side_column_item">
              <div class="side_column_name">
                  <a href="#" class="side_in_column_name">${data['column_name']}</a>
              </div>
              <div class="side_column_blog_count">
                  ${data['blog_count']}
              </div>
              <div class="side_column_title">
                  篇
              </div>
          </div>`);
    }
    
    /*获取作者的所有专栏*/
    function get_author_column() {
        let url='http://localhost:8080/articleServlet?action=get_author_column'
        axios({
            method: "GET",
            url:url,
            params:{
               author_id:author_id
            }
        }).then(function (res) {
             console.log(res);
            let data=res['data']['data'];
            $(".column_list").empty();
            for(let i in data){
                push_author_column(data[i]);
            }
            /*查看专栏*/
            $(".side_in_column_name").click(function () {
                window.open("ViewColumn.html?column_name="+$(this).text());
            })
        })
    }

    /*展示分栏*/
    function push_column_list(column_name) {
          $(".column-list").append(`<div class="column-item">
              ${column_name}
          </div>`);
    }

    /*展示标签*/
    function push_label_list(label_name) {
          $(".label-list").append(`<div class="label-item">
              ${label_name}
          </div>`);
    }

    /*获取文章评论*/
     function get_article_comment() {
         let url='http://localhost:8080/articleServlet?action=get_article_comment'
         axios({
             method: "GET",
             url:url,
             params:{
                 blog_id:blog_id,
             }
         }).then(function (res) {
               console.log(res);
             let data=res['data']['data'];
             for(let i in data){
                 push_comment_list(data[i]);
             }
             for(let i in data){
                  let data1=data[i]['child_list'];
                  for(let j in data1){
                      push_reply_list(data1[j]);
                  }
             }
             $(".root-reply").off("click");
             /*顶层评论的回复按钮*/
             $(".root-reply").click(function () {
                 if($(this).parent().next().css("display")==="none") {
                     $(this).text("收起");
                     $(this).parent().next().show();
                     $(this).parent().next().children().children().attr("placeholder", "回复：" + $(this).parent().prev().prev().text());
                 }else{
                     $(this).text("回复");
                     $(this).parent().next().css("display","none");
                 }
             })
             $(".root-comment-box").off("click");
             /*回复顶层的二级评论*/
             $(".root-comment-box").click(function () {
                 if($(this).prev().children().val()===""){
                     modal("回复内容不能为空！");
                 }else{
                     $(this).parent().css("display","none");
                     write_reply($(this).attr("top_id"),$(this).attr("parent_id"),$(this).prev().children().val());
                     $(this).prev().children().val("");
                     $(this).parent().prev().children().last().text("回复");
                 }
             })
             $(".sub-reply").off("click");
             /*二级评论的回复按钮*/
             $(".sub-reply").click(function () {
                 if($(this).parent().next().css("display")==="none"){
                     $(this).text("收起");
                     $(this).parent().next().show();
                     $(this).parent().next().children().children().attr("placeholder", "回复：" + $(this).parent().prev().prev().children().first().text());
                 }else{
                     $(this).text("回复");
                     $(this).parent().next().css("display","none");
                 }
             })
             $(".sub-reply-btn").off("click");
             /*回复二级评论*/
             $(".sub-reply-btn").click(function () {
                 if($(this).prev().children().val().length===0){
                     modal("回复不能为空");
                 }else{
                     $(this).parent().prev().children().last().text("回复")
                     $(this).parent().css("display","none");
                     write_next_reply($(this).attr("top_id"),$(this).attr("parent_id"),$(this).prev().children().val());
                     $(this).prev().children().val("");
                 }
             })
         })
     }

    /*获取文章信息*/
    function get_article_content() {
        let url='http://localhost:8080/articleServlet?action=get_blog_info'
        axios({
            method: "GET",
            url:url,
           params:{
                id:blog_id,
           }
        }).then(function (res) {
            let data = res['data'];
            $(".is-original-box").text(data['data']['is_original']);
            $(".article-title").text(data['data']['article_title']);
            $(".article-create-time").text(data['data']['create_time']);
            $(".support-number").text(data['data']['support_count']);
            $(".collection-number").text(data['data']['collection_count']);
            $(".comment-number").text(data['data']['comment_count']);
            md_code=data['data']['article_content'];
            author_id=data['data']['article_author'];
            get_author_info();
            get_article_column();
            get_article_label();
            get_author_column();
            get_author_is_collection();
            get_article_comment();
            editormd.markdownToHTML("markdown-body",{
                markdown:md_code,
                htmlDecode:"style,script,iframe",
                tocm:true,
                emoji:true,
                taskList:true,
                tex:true,
                flowChart:true,
                sequenceDiagram:true,
            });
        })
    }

    /*获取文章标签*/
    function get_article_label() {
        let url='http://localhost:8080/articleServlet?action=get_blog_label'
        axios({
            method: "GET",
            url:url,
            params:{
                blog_id:blog_id,
            }
        }).then(function (res) {
            let data=res['data']['data'];
            $(".label-list").empty();
            for(let i in data){
                push_label_list(data[i]);
            }
        })
    }

    /*获取分类专栏*/
    function get_article_column() {
        let url='http://localhost:8080/articleServlet?action=get_blog_column'
        axios({
            method: "GET",
            url:url,
            params:{
                blog_id:blog_id,
            }
        }).then(function (res) {
             let data=res['data']['data'];
             $(".column-list").empty();
             for(let i in data){
                 push_column_list(data[i]);
             }
        })
    }

    /*获取作者信息*/
    function get_author_info() {
        let url='http://localhost:8080/userServlet?action=get_author_info'
        axios({
            method: "GET",
            url:url,
            params:{
                author_id:author_id,
                self_id:window.localStorage.getItem("email")
            }
        }).then(function (res) {
             console.log(res);
            let data = res['data'];
            $(".author-avatar").attr("src",data['data']['headpicture']);
            $(".author-name-box").text(data['data']['nickname']);
            $(".blog_self_count").text(data['data']['blog_count']);
            $(".fans_count").text(data['data']['fans_number']);
            $(".support-count").text(data['data']['support_number']);
            $(".collection-count").text(data['data']['collection_number']);
            $(".comment-count").text(data['data']['comment_number']);
            is_delete=data['data']['is_delete'];
            let is_following=data['data']['is_following'];
            if(is_following==="1")
            {
                $("#author-btn").addClass("author-btn2");
                $("#author-btn").text("已关注");
            }else{
                $("#author-btn").addClass("author-btn1");
                $("#author-btn").text("关注");
            }
        })
    }

    /*模态框函数*/
    function modal(content) {
        $('.modal-body').html(content);
        $("#myModal").modal("show");
    }

    /*logo*/
    $(".navbar-brand").click(function () {
        location.href="Home.html";
    })
</script>
</body>
</html>